<template>
  <div class="keydown-box-index" ref="box">
    <div class="box-ctx">
      <van-cell @touchstart.native.stop="keyboardOpen">弹出默认键盘</van-cell>
      <van-field
        v-model="str"
        @focus="keyboardOpen"
        @blur="keyboardClose"
        clearable
        label="as"
        type="text"
      ></van-field>
      
    </div>

    <van-number-keyboard
      :show="show"
      @blur="show = false"
      @input="onInput"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import { Toast } from "vant";

export default {
  data() {
    return {
      show: false,
      str: "",
      style: {
        height: 0 + "px",
        border: "1px solid red",
      },
    };
  },
  methods: {
    onInput(value) {
      this.str = this.str + value
      Toast(value);
    },
    keyboardOpen() {
     
      // this.$refs.box.scrollTo({ top: 200, behavior: "smooth" });
      this.$emit('scroll')
      this.show = true;
    },
    onDelete() {
      Toast("删除");
    },
    keyboardClose() {
      this.$emit('scroll',false)
      this.show = false;
    },
  },
};
</script>

<style lang="scss">
.keydown-box-index {
  position: relative;
  .box-ctx {
    height: 100vh;
    border: 1px solid red;
  }
  .van-field {
    // position: absolute;
    bottom: 0px;
    border: 1px solid red;
  }
}
</style>
